<template>
    <el-container>
        <el-main>
            <el-table v-loading="tableLoding" :data="tableData.data" style="width: 100%"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="100">
                </el-table-column>
                <el-table-column prop="permissionCode" label="授权码">
                </el-table-column>
                 <el-table-column prop="permissionCompany.applyTime" label="申请时间">
                </el-table-column>
                  <el-table-column prop="permissionCompany.phone" label="申请电话号码">
                </el-table-column>
                <el-table-column prop="permissionUname" label="授权账号">
                </el-table-column>
                <el-table-column prop="permissionEffective" label="授权有效期(天)/次数(次)">
                </el-table-column>
                <el-table-column prop="permissionActivationTime" label="授权时间" sortable>
                </el-table-column>
                <el-table-column prop="emid" label="激活设备" sortable>
                </el-table-column>
            </el-table>
        </el-main>

        <el-footer>
            <div class="block">
                <el-pagination @size-change="changePageSize" @current-change="changeCurrentPage" @prev-click="prevPage"
                    @next-click="nextPage" :current-page="tableData.currentPage"
                    :page-sizes="[5, 10, 15, 20,25,30,35,40]" :page-size="tableData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
                </el-pagination>
            </div>
        </el-footer>
    </el-container>


</template>

<script>
    import {
        getPermissionData
    } from "@/api/permissionApi";


    export default {
        data() {
            return {
                tableData: { //表格data
                    data: [],
                    currentPage: 1,
                    pageSize: 10,
                    total: 0,
                    applyState : 1
                },
                tableLoding: false, //表格加载
                options: [{
                    value: null,
                    label: '全部'
                }, {
                    value: 1,
                    label: '时间授权码'
                }, {
                    value: 2,
                    label: '次数授权码'
                }, {
                    value: 3,
                    label: '永久授权码'
                }],
            }
        },
        created: function () {
            this.getPermissionData()
        },
        methods: {
            //数据控制
            getPermissionData() {
                this.tableLoding = true
                const param = {
                    page:{
                        currentPage : this.tableData.currentPage,
                        pageSize : this.tableData.pageSize
                    },
                    permission:{
                        applyState:this.tableData.applyState,
                    }
                }
                getPermissionData(param).then(response => {
                    console.log(response.data.data.items)
                    this.tableData.data = response.data.data.items
                    this.tableData.total = response.data.data.total
                }).catch(error => {
                    this.$message({
                        showClose: true,
                        message: error,
                        type: 'error'
                    })
                })
                this.tableLoding = false
            },
            changePageSize(val) {
                this.tableData.pageSize = val
                this.getPermissionData()
            },
            changeCurrentPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            prevPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            nextPage(val) {
                this.tableData.currentPage = val
                this.getPermissionData()
            },
            permissionTypeChangeData: function (row, column) {
                return row.permissionType == '1' ? "时间授权码" :
                    row.permissionType == '2' ? "次数授权码" :
                    row.permissionType == '3' ? "永久授权码" :
                    "未知"
            },
            ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
            handleSelectionChange(val) {
                console.log(val)
            },
        }
    }
</script>

<style>
    .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #70b3ff87 !important;
    }
</style>